<script lang="ts" setup>
defineProps({
  email: String,
  phone: String,
})

const formRef = ref(null)
const authPhoneRef = ref(null)
const authEmailRef = ref(null)
const mfaTypes = reactive({
  Phone: '短信验证',
  Email: '邮箱验证',
})
const form = reactive({
  mfaType: 'Phone',
  mfaCode: '',
})

async function valid() {
  const params = {
    mfaType: form.mfaType,
    mfaCode: form.mfaCode,
  }
  try {
    /** 手机验证 */
    if (form.mfaType === 'Phone') {
      const { code } = await authPhoneRef.value?.checkPhoneCode()
      params.mfaCode = code
    }
    else if (form.mfaType === 'Email') {
      const { code } = await authEmailRef.value?.checkCode()
      params.mfaCode = code
    }
    return params
  }
  catch (e) {
    return null
  }
}
defineExpose({
  valid,
})
</script>

<template>
  <el-form
    ref="formRef"
    :model="form"
    label-width="100px"
  >
    <el-form-item label="安全类型">
      <el-radio-group v-model="form.mfaType">
        <el-radio-button v-for="(item, key) in mfaTypes" :key="key" :value="key">
          {{ item }}
        </el-radio-button>
      </el-radio-group>
    </el-form-item>
    <!-- 手机验证 -->
    <AuthPhone v-if="form.mfaType === 'Phone'" ref="authPhoneRef" :phone="phone" />
    <AuthEmail v-if="form.mfaType === 'Email'" ref="authEmailRef" :email="email" />
  </el-form>
</template>
